<template>
  <view class="coupon-page">
    <!-- 优惠券分类 -->
    <view class="coupon-tabs">
      <view 
        class="tab-item" 
        v-for="(item, index) in tabs" 
        :key="index"
        :class="{active: activeTab === index}"
        @click="switchTab(index)"
      >
        <text>{{item}}</text>
      </view>
    </view>
    
    <!-- 优惠券列表 -->
    <scroll-view class="coupon-list" scroll-y>
      <!-- 可用优惠券 -->
      <view class="coupon-section" v-if="activeTab === 0">
        <view class="section-title">
          <text>可用优惠券</text>
          <text class="count">({{availableCoupons.length}}张)</text>
        </view>
        
        <view 
          class="coupon-item" 
          v-for="(item, index) in availableCoupons" 
          :key="index"
        >
          <view class="coupon-left">
            <text class="amount">{{item.amount}}元</text>
            <text class="condition">满{{item.condition}}元可用</text>
          </view>
          <view class="coupon-right">
            <text class="name">{{item.name}}</text>
            <text class="time">{{formatDate(item.startTime)}}至{{formatDate(item.endTime)}}</text>
            <view class="use-btn" @click="useCoupon(item)">
              <text>立即使用</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 已使用优惠券 -->
      <view class="coupon-section" v-if="activeTab === 1">
        <view class="section-title">
          <text>已使用优惠券</text>
          <text class="count">({{usedCoupons.length}}张)</text>
        </view>
        
        <view 
          class="coupon-item used" 
          v-for="(item, index) in usedCoupons" 
          :key="index"
        >
          <view class="coupon-left">
            <text class="amount">{{item.amount}}元</text>
            <text class="condition">满{{item.condition}}元可用</text>
          </view>
          <view class="coupon-right">
            <text class="name">{{item.name}}</text>
            <text class="time">{{formatDate(item.startTime)}}至{{formatDate(item.endTime)}}</text>
            <view class="used-tag">
              <text>已使用</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 已过期优惠券 -->
      <view class="coupon-section" v-if="activeTab === 2">
        <view class="section-title">
          <text>已过期优惠券</text>
          <text class="count">({{expiredCoupons.length}}张)</text>
        </view>
        
        <view 
          class="coupon-item expired" 
          v-for="(item, index) in expiredCoupons" 
          :key="index"
        >
          <view class="coupon-left">
            <text class="amount">{{item.amount}}元</text>
            <text class="condition">满{{item.condition}}元可用</text>
          </view>
          <view class="coupon-right">
            <text class="name">{{item.name}}</text>
            <text class="time">{{formatDate(item.startTime)}}至{{formatDate(item.endTime)}}</text>
            <view class="expired-tag">
              <text>已过期</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 领取更多 -->
      <view class="get-more" @click="goCouponCenter">
        <text>领取更多优惠券</text>
        <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import dayjs from 'dayjs';

export default {
  data() {
    return {
      isLoading: false,
      tabs: ['可用', '已使用', '已过期'],
      activeTab: 0,
      availableCoupons: [],
      usedCoupons: [],
      expiredCoupons: []
    }
  },
  onLoad() {
    this.loadCoupons();
  },
  methods: {
    formatDate(date) {
      return dayjs(date).format('YYYY.MM.DD');
    },
    loadCoupons() {
      this.isLoading = true;
      // 模拟API请求
      setTimeout(() => {
        this.availableCoupons = [
          {
            id: 1,
            name: '新用户专享',
            amount: 20,
            condition: 100,
            startTime: '2023-06-01',
            endTime: '2023-06-30',
            status: 0
          },
          {
            id: 2,
            name: '618大促',
            amount: 50,
            condition: 300,
            startTime: '2023-06-10',
            endTime: '2023-06-20',
            status: 0
          }
        ];
        this.usedCoupons = [
          {
            id: 3,
            name: '会员专享',
            amount: 10,
            condition: 50,
            startTime: '2023-05-01',
            endTime: '2023-05-31',
            status: 1
          }
        ];
        this.expiredCoupons = [
          {
            id: 4,
            name: '五一特惠',
            amount: 30,
            condition: 200,
            startTime: '2023-04-20',
            endTime: '2023-05-10',
            status: 2
          }
        ];
        this.isLoading = false;
      }, 800);
    }
  },
  methods: {
    switchTab(index) {
      this.activeTab = index
    },
    useCoupon(item) {
      uni.showModal({
        title: '提示',
        content: `确定使用${item.name}优惠券吗？`,
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: '使用中...'
            })
            // 模拟API请求
            setTimeout(() => {
              // 更新优惠券状态
              const index = this.availableCoupons.findIndex(c => c.id === item.id);
              if (index !== -1) {
                const usedCoupon = {...this.availableCoupons[index], status: 1};
                this.availableCoupons.splice(index, 1);
                this.usedCoupons.unshift(usedCoupon);
              }
              
              uni.hideLoading();
              uni.showToast({
                title: '使用成功',
                icon: 'success'
              });
            }, 1000);
          }
        }
      })
    },
    goCouponCenter() {
      uni.navigateTo({
        url: '/pages/user/coupon/center'
      })
    }
  }
}
</script>

<style>
.coupon-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f7f7f7;
}
.coupon-tabs {
  display: flex;
  background-color: #fff;
}
.tab-item {
  flex: 1;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  font-size: 28rpx;
  color: #666;
}
.tab-item.active {
  color: #ff2d4a;
  position: relative;
}
.tab-item.active:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60rpx;
  height: 4rpx;
  background-color: #ff2d4a;
}
.coupon-list {
  flex: 1;
  padding: 20rpx;
}
.coupon-section {
  margin-bottom: 30rpx;
}
.section-title {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
}
.count {
  color: #999;
  margin-left: 10rpx;
}
.coupon-item {
  display: flex;
  height: 180rpx;
  margin-bottom: 20rpx;
  background: linear-gradient(to right, #ff2d4a, #ff6b6b);
  border-radius: 10rpx;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.coupon-item:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 20rpx;
  background-image: radial-gradient(circle at 0 10rpx, transparent 10rpx, #ff2d4a 10rpx);
  background-size: 20rpx 20rpx;
  background-repeat: repeat-y;
}
.coupon-item.used {
  background: linear-gradient(to right, #ccc, #ddd);
}
.coupon-item.expired {
  background: linear-gradient(to right, #999, #bbb);
}
.coupon-left {
  width: 200rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-right: 1px dashed rgba(255,255,255,0.5);
}
.amount {
  font-size: 48rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}
.condition {
  font-size: 24rpx;
}
.coupon-right {
  flex: 1;
  padding: 30rpx;
  display: flex;
  flex-direction: column;
}
.name {
  font-size: 28rpx;
  margin-bottom: 15rpx;
}
.time {
  font-size: 24rpx;
  margin-bottom: 15rpx;
}
.use-btn {
  align-self: flex-end;
  padding: 6rpx 20rpx;
  background-color: #fff;
  color: #ff2d4a;
  font-size: 24rpx;
  border-radius: 30rpx;
}
.used-tag, .expired-tag {
  align-self: flex-end;
  padding: 6rpx 20rpx;
  background-color: rgba(255,255,255,0.3);
  color: #fff;
  font-size: 24rpx;
  border-radius: 30rpx;
}
.get-more {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80rpx;
  background-color: #fff;
  border-radius: 10rpx;
  font-size: 28rpx;
  color: #666;
  margin-top: 20rpx;
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 100rpx;
}
.empty image {
  width: 300rpx;
  height: 300rpx;
  margin-bottom: 30rpx;
}
.tip {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 40rpx;
}
.go-btn {
  width: 200rpx;
  height: 70rpx;
  line-height: 70rpx;
  text-align: center;
  background-color: #ff2d4a;
  color: #fff;
  font-size: 28rpx;
  border-radius: 35rpx;
}
</style>